<template>
	<view class="layout">
		<scroll-view scroll-x="true" class="scroll-view">
			<!-- <view class="layout-heade layout-main-itemr">
				<view class="layout-common-item" :key="index" v-for="(item, index) in tableItemList">
					<text>{{ item.label }}</text>
				</view>
			</view> -->

			<view class="layout-main">
				<view class="layout-main-item layout-header">
					<view class="layout-common-item" :key="index" v-for="(item, index) in tableItemList">
						<text>{{ item.label }}</text>
					</view>
				</view>

				<view class="layout-main-item" :key="index" v-for="(item, index) in list">
					<view class="layout-common-item" :key="subItem.type" v-for="subItem in tableItemList">
						<text>{{ item[subItem.type] }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
const tableItemList = Object.freeze([
	{
		label: '日期',
		type: 'approveTime'
	},
	{
		label: '产品名称',
		type: 'productName'
	},
	{
		label: '探店模式',
		type: 'commissionLabel'
	},
	{
		label: '收益',
		type: 'finalPriceYuan'
	}
]);

export default {
	name: 'CommonIncome',

	props: {
		list: {
			type: Array,
			default: () => []
		}
	},

	data() {
		return {
			tableItemList
		};
	}
};
</script>

<style lang="scss" scoped>
.layout {
	margin-top: 30rpx;

	&-header {
		width: 100%;
		// display: flex;
		// align-items: center;
	}

	&-main {
		display: table;
		table-layout: fixed;
		min-width: 100%;

		&-item {
			display: table-row;
			height: 98rpx;
			line-height: 98rpx;
			border-bottom: 2rpx solid #fafafa;

			.layout-common-item {
				display: table-cell;
				table-layout: fixed;
				color: #333;
				font-size: 24rpx;

				&:last-child {
					text-align: right;
					color: #ff6b11;
					font-weight: 500;
				}

				text {
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			&:last-child {
				border-bottom: none;
			}

			&.layout-header {
				height: 64rpx;
				line-height: 64rpx;

				color: #5e6479;
				font-size: 24rpx;

				> view {
					&:first-child {
						border-radius: 12rpx 0 0 12rpx;
					}

					&:last-child {
						color: #5e6479;

						border-radius: 0 12rpx 12rpx 0;
					}

					background: #f8f8f8;
				}
			}
		}
	}

	&-common-item {
		&:first-child {
			text {
				padding-left: 10rpx;
				width: 120rpx;
			}
		}

		&:nth-child(2) {
			text {
				width: 260rpx;
			}
		}

		&:nth-child(3) {
			text {
				width: 160rpx;
			}
		}

		&:last-child {
			flex: 1;
			text-align: right;
			padding-right: 10rpx;
		}
	}

	.scroll-view {
		width: 100%;
		white-space: nowrap;
	}
}
</style>
